<template>
  <div class="results-analysis">
    <!-- Top Gauge Charts -->
    <el-row :gutter="20" class="gauge-cards">
      <el-col :span="8">
        <div class="gauge-card">
          <div ref="deptGauge" class="gauge-chart"></div>
          <div class="gauge-label">公司部门标准差</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="gauge-card">
          <div ref="deptCompletionGauge" class="gauge-chart"></div>
          <div class="gauge-label">部门完成率标准差</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="gauge-card">
          <div ref="personalGauge" class="gauge-chart"></div>
          <div class="gauge-label">个人完成率标准差</div>
        </div>
      </el-col>
    </el-row>

    <!-- Department Analysis -->
    <div class="analysis-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart-card">
            <div class="chart-header">
              <div class="legend">
                <span class="legend-item">
                  <span class="dot"></span>
                  ≥ 100%
                </span>
                <span class="legend-item">
                  <span class="dot"></span>
                  80-100%
                </span>
                <span class="legend-item">
                  <span class="dot"></span>
                  60-80%
                </span>
                <span class="legend-item">
                  <span class="dot"></span>
                  40-60%
                </span>
                <span class="legend-item">
                  <span class="dot"></span>
                  ≤ 20%
                </span>
              </div>
            </div>
            <div ref="deptDonut" class="donut-chart"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart-card">
            <div class="chart-header">
              <span>部门结果达成统计</span>
              <el-button type="text" icon="el-icon-more"></el-button>
            </div>
            <div class="progress-list">
              <div class="progress-item">
                <span class="label">平均完成率</span>
                <el-progress 
                  :percentage="100"
                  :show-text="false"
                  color="#67C23A"
                ></el-progress>
                <span class="value">100%</span>
              </div>
              <div class="progress-item">
                <span class="label">部门完成率</span>
                <el-progress 
                  :percentage="100"
                  :show-text="false"
                  color="#67C23A"
                ></el-progress>
                <span class="value">100%</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- Personal Analysis -->
    <div class="analysis-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart-card">
            <div class="chart-header">
              <div class="legend">
                <span class="legend-item">
                  <span class="dot"></span>
                  ≥ 100%
                </span>
                <span class="legend-item">
                  <span class="dot"></span>
                  80-100%
                </span>
                <span class="legend-item">
                  <span class="dot"></span>
                  60-80%
                </span>
                <span class="legend-item">
                  <span class="dot"></span>
                  40-60%
                </span>
                <span class="legend-item">
                  <span class="dot"></span>
                  ≤ 20%
                </span>
              </div>
            </div>
            <div ref="personalDonut" class="donut-chart"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart-card">
            <div class="chart-header">
              <span>个人结果达成统计</span>
              <el-button type="text" icon="el-icon-more"></el-button>
            </div>
            <div class="progress-list">
              <div class="progress-item">
                <span class="label">平均完成率</span>
                <el-progress 
                  :percentage="100"
                  :show-text="false"
                  color="#67C23A"
                ></el-progress>
                <span class="value">100%</span>
              </div>
              <div class="progress-item">
                <span class="label">部门完成率</span>
                <el-progress 
                  :percentage="100"
                  :show-text="false"
                  color="#67C23A"
                ></el-progress>
                <span class="value">100%</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ResultsAnalysis',
  data() {
    return {
      charts: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  beforeDestroy() {
    this.charts.forEach(chart => {
      chart.dispose()
    })
  },
  methods: {
    initCharts() {
      // Initialize gauge charts
      const gaugeCharts = ['deptGauge', 'deptCompletionGauge', 'personalGauge']
      const gaugeValues = [50, 100, 100]
      const gaugeColors = ['#F56C6C', '#409EFF', '#409EFF']

      gaugeCharts.forEach((ref, index) => {
        const chart = echarts.init(this.$refs[ref])
        chart.setOption({
          series: [{
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 5,
            radius: '100%',
            progress: {
              show: true,
              roundCap: true,
              width: 12
            },
            pointer: {
              show: false
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 12,
                color: [[1, '#E5E7EB']]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            title: {
              show: true,
              offsetCenter: [0, '20%'],
              fontSize: 14,
              color: '#86909C'
            },
            detail: {
              show: true,
              offsetCenter: [0, '-10%'],
              fontSize: 24,
              color: '#1F2329',
              formatter: '{value}%'
            },
            data: [{
              value: gaugeValues[index],
              itemStyle: {
                color: gaugeColors[index]
              }
            }]
          }]
        })
        this.charts.push(chart)
      })

      // Initialize donut charts
      const donutCharts = ['deptDonut', 'personalDonut']
      const donutValues = [2, 1]

      donutCharts.forEach((ref, index) => {
        const chart = echarts.init(this.$refs[ref])
        chart.setOption({
          series: [{
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            label: {
              show: false
            },
            data: [{
              value: 100,
              name: '完成',
              itemStyle: {
                color: '#67C23A'
              }
            }],
            emphasis: {
              disabled: true
            }
          }],
          graphic: {
            elements: [{
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: donutValues[index].toString(),
                fontSize: 28,
                fontWeight: 'bold',
                textAlign: 'center',
                fill: '#1F2329'
              }
            }]
          }
        })
        this.charts.push(chart)
      })

      // Handle window resize
      window.addEventListener('resize', () => {
        this.charts.forEach(chart => chart.resize())
      })
    }
  }
}
</script>

<style scoped>
.results-analysis {
  padding: 24px;
  background-color: #f5f7fa;
}

.gauge-cards {
  margin-bottom: 24px;
}

.gauge-card {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.gauge-chart {
  height: 160px;
}

.gauge-label {
  font-size: 14px;
  color: #86909c;
  margin-top: 8px;
}

.analysis-section {
  margin-bottom: 24px;
}

.chart-card {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  height: 100%;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
  color: #1f2329;
}

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #86909c;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  background-color: #67C23A;
}

.donut-chart {
  height: 300px;
}

.progress-list {
  padding: 20px 0;
}

.progress-item {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.progress-item:last-child {
  margin-bottom: 0;
}

.progress-item .label {
  width: 100px;
  font-size: 14px;
  color: #1f2329;
}

.progress-item .value {
  margin-left: 16px;
  font-size: 14px;
  color: #1f2329;
}

:deep(.el-progress-bar__outer) {
  flex: 1;
  margin: 0 16px;
  height: 8px !important;
  background-color: #f2f3f5;
}

:deep(.el-progress-bar__inner) {
  border-radius: 4px;
}
</style>